<template>
  <div>
    <el-row :gutter="10" :style="{height: heightBox - 102 + 'px'}">
      <el-col :span="3" v-for="(item, index) in list" :key="item.id">
        <el-card :body-style="{ padding: '8px'}" shadow="hover">
          <div class="img-container">
            <img :src="`${imgPrefix}${item.mainPic[0]}`" class="image">
          </div>
          <div class="info">
            <div class="name">{{ item.name }}</div>
            <div class="price">￥ {{item.price}}</div>
            <div class="specs">
              <div class="spec">
                <el-tag size="mini" type="success">公蟹</el-tag>{{item.specs_male[0]}}两 |
                {{item.specs_male[1]}}只
              </div>
              <div class="spec">
                <el-tag size="mini" type="primary">母蟹</el-tag>{{item.specs_female[0]}}两 |
                {{item.specs_female[1]}}只
              </div>
            </div>
            <div class="detail">
              <el-divider>详情图</el-divider>
              <el-carousel :interval="4000" type="card" height="80px" :autoplay="false" trigger="click"
                indicator-position="none">
                <el-carousel-item v-for="(itm, idx) in item.detailPic" :key="idx">
                  <!-- <h3 class="medium">{{ itm }}</h3> -->
                  <div class="img-container">
                    <img :src="`${imgPrefix}${itm}`" class="image">
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="actions">
              <el-popconfirm title="确定要删除该件商品吗？" @confirm="deleteEvent(item.id)">
                <el-button slot="reference" size="mini" plain type="danger" icon="el-icon-delete">删除</el-button>
              </el-popconfirm>
              <el-button size="mini" plain type="success" icon="el-icon-edit"
                @click="openEditDialog(item)">修改</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加/修改 -->
    <Dialog></Dialog>
  </div>
</template>

<script>
  import {
    getGoodsList,
    deleteGoods
  } from "@/api/goods"
  import Dialog from "./Dialog"
  export default {
    components: {
      Dialog
    },
    data() {
      return {
        imgPrefix: process.env.VUE_APP_BASE_API + '/api/',
        list: [],
        heightBox: 0
      }
    },
    mounted() {
      this.getGoodsListData()
      this.$bus.$on("onSaveGoods", () => {
        this.getGoodsListData()
      })
      window.addEventListener("resize", this.getCardHeight())
    },
    beforeDestroy() {
      this.$bus.$off("onSaveGoods");
    },
    destroyed() {
      window.removeEventListener("resize", this.getCardHeight())
    },
    methods: {
      deleteEvent(id) {
        // console.log(id)
        deleteGoods({
          id: id
        }).then(() => {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.getGoodsListData()
        })
      },
      async getGoodsListData() {
        try {
          let res = await getGoodsList();
          this.list = res.data;
          console.log(res)
        } catch (e) {
          console.log(e, 'error')
          //TODO handle the exception
        }
      },


      openEditDialog(item) {
        this.$bus.$emit('onEditDetails', item)
      },

      //获取页面高度
      getCardHeight() {
        this.heightBox = document.body.clientHeight - 50; //- header - breadCrumbs
      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  ::v-deep .el-row {
    .el-card.is-hover-shadow:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .3)
    }

    .el-card__body {
      .img-container {
        position: relative;
        width: 100%;
        border-radius: 10px;
        /* 设置为父元素的 100% */
        padding-top: 100%;
        /* 设置高度为宽度的 100%，实现 1:1 的比例 */
        overflow: hidden;

        /* 隐藏超出的内容 */
        .image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          /* 图片宽度为 100% */
          height: 100%;
          /* 图片高度为 100% */
          object-fit: cover;
          /* 保持图片原始比例填充容器 */
        }
      }

      .info {
        padding: 10px;
        line-height: 30px;

        .name {
          border-bottom: 1px dashed #e6e6e6;
          padding-bottom: 5px;
        }

        .price {
          color: #ff5a00;
          margin: 5px 0;
          font-weight: bold;
        }

        .spec {
          display: flex;
          line-height: 22px;
          align-items: center;
          font-size: 14px;
          color: #666;

          .el-tag {
            margin-right: 8px;
          }
        }

        .el-divider__text {
          color: #999;
        }

        .detail {
          .img-container {
            height: 80px;
            border-radius: 0;

            .image {
              height: 80px;
            }
          }
        }

        .actions {
          margin-top: 15px;
          padding-top: 10px;
          border-top: 1px dashed #e6e6e6;
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
    }
  }
</style>
